<template>
    <div>
        <div class="box">
            <div class="top">
                简易计算器
            </div>
            <div class="bo1">
                <p v-show="flag6">={{sum}}</p>
                <p v-show="flag5">{{arr}}</p>
                <p v-show="flag1">+</p>
                <p v-show="flag2">-</p>
                <p v-show="flag3">×</p>
                <p v-show="flag4">÷</p>
                <p>{{count}}</p>
            </div>
            <div class="bo2">
                <div class="bo21">
                    <div class="bo211 bo" @click="clear">
                        clear
                    </div>
                    <div class="bo211 bo" @click="tui">
                        ←
                    </div>
                    <div class="bo211 bo">
                        @
                    </div>
                    <div class="bo211 bo" @click="jia">
                        ＋
                    </div>
                </div>
                <div class="bo21">
                    <div class="bo211 xo" @click="jiu">
                        9
                    </div>
                    <div class="bo211 xo" @click="ba">
                        8
                    </div>
                    <div class="bo211 xo" @click="qi">
                        7
                    </div>
                    <div class="bo211 bo" @click="jian">
                        -
                    </div>
                </div>
                <div class="bo21">
                    <div class="bo211 xo" @click="liu">
                        6
                    </div>
                    <div class="bo211 xo" @click="wu">
                        5
                    </div>
                    <div class="bo211 xo" @click="si">
                        4
                    </div>
                    <div class="bo211 bo" @click="chen">
                        ×
                    </div>
                </div>
                <div class="bo21">
                    <div class="bo211 xo" @click="san">
                        3
                    </div>
                    <div class="bo211 xo" @click="er">
                        2
                    </div>
                    <div class="bo211 xo" @click="yi">
                        1
                    </div>
                    <div class="bo211 bo" @click="chu">
                        ÷
                    </div>
                </div>
                <div class="bo22">
                    <div class="bo221 xo" @click="lin">
                        0
                    </div>
                    <div class="bo222 xo">
                        .
                    </div>
                    <div class="bo222 bo" @click="deng">
                        =
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'Vue',
    data(){
       return{
        count:0,
        flag1:false,
        flag2:false,
        flag3:false,
        flag4:false,
        flag5:false,
        flag6:false,
        arr:0,
        sum:0
       }
    },
    mounted(){

    },
    methods:{
        deng(){
            if(this.flag1=true){
                this.flag6=true
                return this.sum=parseInt(this.count)+parseInt(this.arr)
            }
            if(this.flag2=true){
                this.flag6=true
                return this.sum=parseInt(this.count)-parseInt(this.arr)
            }
            if(this.flag3=true){
                this.flag6=true
                return this.sum=parseInt(this.count)*parseInt(this.arr)
            }
            if(this.flag4=true){
                this.flag6=true
                return this.sum=parseInt(this.count)/parseInt(this.arr)
            }
        },
        clear(){
            this.count=0
            this.arr=0
            this.sum=0
            this.flag1=false
            this.flag2=false
            this.flag3=false
            this.flag4=false
            this.flag5=false
            this.flag6=false
        },
        tui(){
            this.arr=0
            this.flag5=false
        },
        jia(){
            this.flag1=true
            if(this.flag1=true){
                this.flag2=false
                this.flag3=false
                this.flag4=false
            }
        },
        jian(){
            this.flag2=true
            if(this.flag2=true){
                this.flag1=false
                this.flag3=false
                this.flag4=false
            }
        },
        chen(){
            this.flag3=true
            if(this.flag3=true){
                this.flag2=false
                this.flag1=false
                this.flag4=false
            }
        },
        chu(){
            this.flag4=true
            if(this.flag4=true){
                this.flag2=false
                this.flag3=false
                this.flag1=false
            }
        },
        jiu(){
            if(this.count=0){
                return this.count=9
            }else if(this.count=9){
                this.flag5=true
                return this.arr=9
            }
        },
        ba(){
            if(this.count=0){
                return this.count=8
            }else if(this.count=8){
                this.flag5=true
                return this.arr=8
            }
        },
        qi(){
            if(this.count=0){
                return this.count=7
            }else if(this.count=7){
                this.flag5=true
                return this.arr=7
            }
        },
        liu(){
            if(this.count=0){
                return this.count=6
            }else if(this.count=6){
                this.flag5=true
                return this.arr=6
            }
        },
        wu(){
            if(this.count=0){
                return this.count=5
            }else if(this.count=5){
                this.flag5=true
                return this.arr=5
            }
        },
        si(){
            if(this.count=0){
                return this.count=4
            }else if(this.count=4){
                this.flag5=true
                return this.arr=4
            }
        },
        san(){
            if(this.count=0){
                return this.count=3
            }else if(this.count=3){
                this.flag5=true
                return this.arr=3
            }
        },
        er(){
            if(this.count=0){
                return this.count=2
            }else if(this.count=2){
                this.flag5=true
                return this.arr=2
            }
        },
        yi(){
            if(this.count=0){
                return this.count=1
            }else if(this.count=1){
                this.flag5=true
                return this.arr=1
            }
        },
        lin(){
            if(this.count=0){
                return this.count=0
            }else if(this.count=0){
                this.flag5=true
                return this.arr=0
            }
        },
    },
};
</script>
<style lang='scss' scoped>
.top{
     width: 80%;
     background: rgb(114, 111, 111);
}
.box{
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 40px;
    text-align: center;
    line-height: 80px;
    .bo{
        background: rgb(196, 193, 189);
    }
    .xo{
        background: silver;
    }
    .bo1{
        width: 70%;
        height: 250px;

    }
    .bo2{
        width: 800px;
        height: 417px;
        display: flex;
        flex-direction: column;
        .bo21{
            width: 100%;
            height: 20%;
            display: flex;
            align-items: center;
            .bo211{
                flex: 1;
                height: 100%;
                border: 1px solid black;
            }
        }
        .bo22{
            width: 100%;
            height: 20%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .bo221{
                width: 49.5%;
                height: 100%;
                border: 1px solid black;
            }
            .bo222{
                width: 24.4%;
                height: 100%;
                border: 1px solid black;
            }
        }
    }
}
p{
    float: right;
}
</style>